<template>
  <div class="remarks-div__base" ref="scrollelem">
    <div class="remarks-div__scroll">
      <div class="remarks-div__score">
        <div class="score-div__general">
          <div class="score-div__total">{{ sellerRenderData.score }}</div>
          <p class="score-div__text">综合评分</p>
          <p class="score-div__detail">
            高于周边商家{{ sellerRenderData.rankRate }}%
          </p>
        </div>
        <div class="score-div__grades">
          <div class="score-div__star">
            <p class="score-div__text">口味评分</p>
            <star-comp
              class="score-star__comp"
              :score="sellerRenderData.foodScore"
              :size="'tiny'"
            ></star-comp>
            <div class="score-div__altitude">
              {{ sellerRenderData.foodScore }}
            </div>
          </div>
          <div class="score-div__star">
            <p class="score-div__text">服务态度</p>
            <star-comp
              class="score-star__comp"
              :score="sellerRenderData.serviceScore"
              :size="'tiny'"
            ></star-comp>
            <div class="score-div__altitude">
              {{ sellerRenderData.serviceScore }}
            </div>
          </div>
          <div class="score-div__star">
            <div class="score-div__text">送达时间</div>
            <span class="score-span__time"
              >{{ sellerRenderData.deliveryTime }}分钟</span
            >
          </div>
        </div>
      </div>
      <gap-comp></gap-comp>
      <div class="remarks-div__filters">
        <div
          class="remarks-div__button remarks-div__positive"
          :class="{ 'button-active': selectButtonStatus.all }"
          @click="
            handleSelectButtonClick(null);
            refreshBetterScroll(bScroll);"
        >
          全部
        </div>
        <div
          class="remarks-div__button remarks-div__positive"
          :class="{ 'button-active': selectButtonStatus.recommend }"
          @click="
            handleSelectButtonClick(0);
            refreshBetterScroll(bScroll);
          "
        >
          满意
        </div>
        <div
          class="remarks-div__button remarks-div__negative"
          :class="{ 'button-active': selectButtonStatus.notrecommend }"
          @click="
            handleSelectButtonClick(1);
            refreshBetterScroll(bScroll);
          "
        >
          不满意
        </div>
      </div>
      <div class="remarks-div__textonly">
        <i
          class="icon-check_circle remarks-i__icon"
          :class="{ 'icon-active': filterDependency.isFilterText }"
          @click="
            filterDependency.isFilterText = !filterDependency.isFilterText;
            refreshBetterScroll(bScroll);
          "
        ></i
        ><span class="remarks-div__text">只看有价值的评价</span>
      </div>
      <ul class="remarks-ul__list" v-if="filterUserRatings.length > 0">
        <li
          class="remarks-li__list"
          v-for="(remark, index) in filterUserRatings"
          :key="index"
        >
          <img
            class="list-img__avatar"
            :src="remark.avatar"
            height="28"
            width="28"
          />
          <div class="list-div__info">
            <div class="list-div__send">
              {{ remark.username }}
              <span class="list-span__time">{{ remark.formatTime }}</span>
            </div>
            <div class="list-div__star">
              <star-comp :score="remark.score" :size="'tiny'"></star-comp>
              <span class="list-span__time" v-if="remark.deliveryTime"
                >{{ remark.deliveryTime }}分钟送达</span
              >
            </div>
            <p class="list-p__content">
              {{ remark.text || "此用户没有留下评论~" }}
            </p>
            <div class="list-div__more">
              <i
                class="list-i__icon"
                :class="
                  remark.rateType === 0 ? 'icon-thumb_up' : 'icon-thumb_down'
                "
                :style="{
                  color:
                    remark.rateType === 0
                      ? 'rgb(0,160,220)'
                      : 'rgb(147, 153, 159)',
                }"
              ></i>
              <mark-comp
                class="list-mark__base"
                v-for="recommend in remark.recommend"
                :key="recommend + remark.username"
                :content="recommend"
              ></mark-comp>
              <span v-if="remark.recommend.length === 0"
                >该用户暂无推荐哦~</span
              >
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, Ref } from "@vue/composition-api";
import { UserRemark, ButtonFilterDependency } from "./../../common/globalType";
import { storageGetData, storageSetData } from "./../../common/util/storage";
import { formatDate } from "./../../common/util/tool";
import ButtonFilterList from "./../../composables/buttonFilter-ratingList";
import ButtonFilterEffect from "./../../composables/buttonFilter-eventHandler";
import initBetterScroll from "./../../composables/betterScroll-init";
import refreshBetterScroll from "./../../composables/betterScroll-refresh";
import ratingGET from "./../../common/util/request";
import GapComp from "./../gap-comp/gap-comp.vue";
import StarComp from "./../star-comp/star-comp.vue";
import MarkComp from "./../remarks-mark/remarks-mark.vue";

// 商家相关渲染数据
interface SellerRenderData {
  deliveryTime: number;
  foodScore: number;
  rankRate: number;
  score: number;
  serviceScore: number;
}
export default defineComponent({
  name: "Content-Remarks",
  // 组件注册
  components: {
    GapComp,
    StarComp,
    MarkComp,
  },
  setup() {
    // 初始化商家渲染数据
    const sellerRenderData = reactive<SellerRenderData>({
      deliveryTime: 0,
      foodScore: 0,
      rankRate: 0,
      score: 0,
      serviceScore: 0,
    });
    const userRemarks = reactive<UserRemark[]>([]); // 初始化用户评价数组
    // 过滤原则依赖
    const filterDependency = reactive<ButtonFilterDependency>({
      currRule: null,
      isFilterText: true,
    });
    const scrollelem: Ref<null | HTMLDivElement> = ref(null); // betterscroll初始化元素
    // 组合函数：提取按钮过滤的副作用，点击事件和按钮选择状态
    const { handleSelectButtonClick, selectButtonStatus } = ButtonFilterEffect(
      filterDependency
    );
    // 组合函数：提取按钮过滤后数组
    const { filterUserRatings } = ButtonFilterList(
      userRemarks,
      filterDependency
    );
    // 接受数据仓库中传递的数据并更新商家渲染数据
    const sellerData = storageGetData("seller");
    if (sellerData == null) {
      throw console.trace("意料之外的情况：sellerData的数据为null");
    }
    Object.keys(sellerRenderData).forEach((renderKey) => {
      type RenderKey = keyof SellerRenderData;
      sellerRenderData[renderKey as RenderKey] =
        sellerData[renderKey as RenderKey];
    });
    const bScroll = initBetterScroll(scrollelem, { click: true }); // 数据请求发送前初始化betterScroll
    // 远程请求评价数据并更新用户评价数组
    ratingGET("/api/ratings")
      .then((res) => {
        // 更新用户评价数组
        const data: UserRemark[] = res.data;
        data.forEach((remark) => {
          remark.formatTime = formatDate(
            new Date(remark.rateTime),
            "YYYY-MM-DD hh:mm"
          );
          userRemarks.push(remark);
        });
        filterDependency.isFilterText = false; // 触发计算属性更新
        refreshBetterScroll(bScroll); // 重新刷新betterScroll
        // 往数据仓库中存储数据
        storageSetData("ratings", data);
      })
      .catch((err) => {
        console.trace(err);
        throw new Error("An Error happens after requested ratings.");
      });

    return {
      sellerRenderData,
      scrollelem,
      selectButtonStatus,
      handleSelectButtonClick,
      filterUserRatings,
      filterDependency,
      bScroll,
      refreshBetterScroll,
    };
  },
});
</script>

<style lang="stylus" scoped>
@import './../../common/style/mixin.styl';

$line-color = rgba(7, 17, 27, 0.1);
$text-color = rgb(7, 17, 27);
$theme-yellow = rgb(255, 153, 0);
$total-number-size = 24px;
$total-number-lineheight = 28px;
$total-text-lineheight = 14px;
$total-text-fontsize = 14px;
$detail-color = #93999f;
$detail-fontsize = 12px;
$block-gap = 16px;
$star-fontsize = 14px;
$filters-button-deepblue = rgb(0, 160, 220);
$filters-button-skyblue = rgba(0, 160, 220, 0.2);
$filters-button-color = rgb(77, 85, 93);
$filters-button-gray = rgba(77, 85, 93, 0.2);
$textonly-color = rgb(147, 153, 159);
$textonly-icon-fontsize = 24px;
$textonly-icon-lineheight = 26px;
$textonly-text-fontsize = 14px;
$textonly-text-deepblue = rgb(0, 160, 220);
$list-avatar-height = 28px;
$list-content-lineheight = 18px;

.remarks-div__base {
  height: calc(100vh - 176px);
  overflow: hidden;
}

.remarks-div__scroll {
  width: 100%;
}

.remarks-div__score {
  box-sizing: border-box;
  padding: 18px 0px;
  margin: 0 auto;

  .score-div__general {
    display: inline-block;
    padding-right: $block-gap;
    border-right: 1px solid $line-color;
    vertical-align: top;

    .score-div__total {
      color: $theme-yellow;
      line-height: $total-number-lineheight;
      font-size: $total-number-size;
      font-weight: bold;
      padding-bottom: 6px;
    }

    .score-div__text {
      color: $text-color;
      line-height: $total-text-lineheight;
      font-size: $total-text-fontsize;
      padding-bottom: 8px;
    }

    .score-div__detail {
      color: $detail-color;
      font-size: $detail-fontsize;
      padding-bottom: 6px;
    }
  }

  .score-div__grades {
    display: inline-block;
    padding-left: $block-gap;
    vertical-align: top;

    .score-div__star {
      display: flex; // flex布局
      // justify-content: space-around;
      align-items: center;
      padding-bottom: 8px;
      font-size: $star-fontsize;
    }

    .score-star__comp {
      padding: 0 8px;
    }

    .score-div__altitude {
      color: $theme-yellow;
    }

    .score-span__time {
      color: $detail-color;
      font-size: $star-fontsize;
      padding-left: 12px;
    }
  }
}

.remarks-div__filters {
  text-align: left;
  margin: 0 24px;
  padding: 18px 0;
  position: relative;
  bottom-line($line-color);

  .remarks-div__button {
    display: inline-block;
    margin-right: 8px;
    font-size: $star-fontsize;
    color: $filters-button-color;
    padding: 8px 12px;
    transition: all 0.5s ease;
  }

  .remarks-div__positive {
    background-color: $filters-button-skyblue;
  }

  .remarks-div__negative {
    background-color: $filters-button-gray;
  }

  .button-active {
    background-color: $scroll-button-deepblue;
    color: white;
  }
}

.remarks-div__textonly {
  padding: 12px 18px;
  line-height: $textonly-icon-lineheight;
  color: $textonly-color;
  text-align: left;
  position: relative; // 相对定位

  .remarks-i__icon {
    font-size: $textonly-icon-fontsize;
    padding-right: 4px;
  }

  .icon-active {
    color: $scroll-button-deepblue;
  }

  .remarks-div__text {
    font-size: $textonly-text-fontsize;
    vertical-align: top;
  }

  bottom-line($line-color);
}

.remarks-ul__list {
  margin: 0 18px;
  text-align: left;

  .remarks-li__list {
    padding: 18px 0;
    display: flex;
    position: relative; // 相对定位
    bottom-line($line-color);

    &:last-child::after {
      display: none;
    }
  }

  .list-img__avatar {
    margin-right: 12px;
    border-radius: 50%;
    height: $list-avatar-height;
    width: $list-avatar-height;
  }

  .list-div__info {
    flex: 1 1 auto;

    .list-div__send {
      display: flex; // flex
      justify-content: space-between;
      align-items: center;
      font-size: $detail-fontsize;
      padding-bottom: 6px;

      .list-span__time {
        color: $detail-color;
      }
    }

    >>>.star-div__base { // 样式穿透
      vertical-align: middle;

      .tiny {
        width: 14px;
        height: 14px;
      }
    }

    .list-div__star {
      padding-bottom: 6px;

      .list-span__time {
        color: $detail-color;
        padding-left: 6px;
        font-size: $star-fontsize;
        vertical-align: middle;
      }
    }

    .list-p__content {
      font-size: $star-fontsize;
      line-height: $list-content-lineheight;
      padding-bottom: 8px;
    }
  }

  .list-div__more {
    overflow: hidden;
    color: $text-color;
    font-size: $detail-fontsize;
    line-height: $textonly-icon-lineheight;

    .list-i__icon {
      vertical-align: middle;
      margin-right: 4px;
    }

    .list-mark__base {
      vertical-align: middle;
      margin: 0 4px;
    }
  }
}
</style>
